<template>
	<div class="qrcode-page">
		<h1>签到二维码</h1>
		<div v-if="qrCodeDataUrl">
			<img :src="qrCodeDataUrl" alt="QR Code" class="qr-code" />
			<div class="qr-code-url">{{ qrCodeUrl }}</div>
			<button @click="downloadQRCode">下载二维码</button>
			<button @click="simQRCode">模拟扫码</button>
		</div>
	</div>
</template>

<script>
	import QRCode from 'qrcode';

	export default {
		props: {
			tvId: {
				type: String,
				required: true
			},
			endTime: {
				type: String,
				required: true
			}
		},
		data() {
			return {
				qrCodeDataUrl: null,
				qrCodeUrl: ''
			};
		},
		methods: {
			generateQRCode() {
				//const url = `${window.location.origin}/#/pages/sign/sign?tvId=${this.tvId}&endTime=${this.endTime}`;
				const url = `/pages/vist/sign/sign?tvId=${this.tvId}&endTime=${this.endTime}`;
				this.simUrl=url;
				console.log(this.simUrl);
				this.qrCodeUrl = url;
				QRCode.toDataURL(url)
					.then(dataUrl => {
						this.qrCodeDataUrl = dataUrl;
					})
					.catch(err => {
						console.error('生成二维码出错:', err);
					});
			},
			downloadQRCode() {
				const link = document.createElement('a');
				link.href = this.qrCodeDataUrl;
				link.download = 'qrcode.png';
				link.click();
			},
			simQRCode() {
				 
				let href = this.simUrl;
				 
				 this.$tab.navigateTo(href)
				//link.download = 'qrcode.png';
				//link.click();
			}
		},
		created() {
			this.generateQRCode();
		}
	};
</script>

<style scoped>
	.qrcode-page {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20px;
	}

	.qr-code {
		width: 400px;
		height: 400px;
		margin-bottom: 20px;
	}

	.qr-code-url {
		width: 100%;
		max-width: 400px;
		margin-bottom: 20px;
		padding: 10px;
		font-size: 16px;
		text-align: center;
		border: 1px solid #ccc;
		border-radius: 4px;
		background-color: #f9f9f9;
		word-break: break-all;
	}
</style>
